﻿<Window x:Class="Sample.PhotoBrowser.MainWindow"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:s="http://schemas.microsoft.com/surface/2008"
                 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
                 xmlns:local="clr-namespace:Sample.PhotoBrowser" xmlns:Photo="clr-namespace:Sample.PhotoBrowser.Components"
                 xmlns:zoil="http://zoil.codeplex.com/schemas/2012"
                 x:Name="self"
                 Title="ZOIL PhotoBrowser" 
                 Width="1024" 
                 Height="768" 
                 WindowStartupLocation="CenterScreen">
    <Window.Background>
        <RadialGradientBrush>
            <GradientStop Color="#FF555555" Offset="0"/>
            <GradientStop Color="#FF333333" Offset="1"/>
        </RadialGradientBrush>
    </Window.Background>
    <!-- Style for SurfaceToggleButton only changes opacity when togglebutton is checked-->
    <Window.Resources>
        <Style TargetType="{x:Type Label}">
            <Setter Property="FontFamily" Value="SegoeUI" />
            <Setter Property="FontWeight" Value="Light" />
        </Style>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="FontFamily" Value="SegoeUI" />
            <Setter Property="FontWeight" Value="Light" />
        </Style>
        <Style TargetType="{x:Type s:SurfaceTextBox}">
            <Setter Property="FontFamily" Value="SegoeUI" />
            <Setter Property="FontWeight" Value="Light" />
        </Style>

        <Style x:Key="CustomSurfaceToggleButtonStyle" TargetType="{x:Type s:SurfaceToggleButton}">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="BorderBrush" Value="#00FFFFFF"/>
            <Setter Property="FontFamily" Value="SegoeUI" />
            <Setter Property="FontWeight" Value="Light" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type s:SurfaceToggleButton}">
                        <Border MinHeight="30" MinWidth="30" x:Name="BulletDecorator" Opacity="0.7" Height="Auto" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Background="Transparent">
                            <Border.Effect>
                                <DropShadowEffect x:Name="BulletShadow" Color="YellowGreen" BlurRadius="1" Opacity="0" ShadowDepth="0" Direction="0"/>
                            </Border.Effect>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ClipToBounds="False" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="False">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="00:00:00.2000000" Storyboard.TargetName="BulletDecorator" Storyboard.TargetProperty="Opacity" To="0.5"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="00:00:00.2000000" Storyboard.TargetName="BulletDecorator" Storyboard.TargetProperty="Opacity" To="1"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="00:00:00.2000000" Storyboard.TargetName="BulletDecorator" Storyboard.TargetProperty="Opacity" To="1"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="00:00:00.2000000" Storyboard.TargetName="BulletDecorator" Storyboard.TargetProperty="Opacity" To="0.5"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="CustomSurfaceButtonStyle" TargetType="{x:Type s:SurfaceButton}">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="FontFamily" Value="SegoeUI" />
            <Setter Property="FontWeight" Value="Light" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type s:SurfaceButton}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Border BorderBrush="Black" BorderThickness="5">
        <Grid>
            <!-- RootGrid is where the Mainlandscape will be added -->
            <Grid x:Name="RootGrid">
                <zoil:ZInformationLandscape x:Name="InformationLandscape" ConstraintsEnabled="True" MaxZoomFactor="5.0" zoil:ZInformationLandscape.ZoomTarget="True">
                    <i:Interaction.Behaviors>
                        <zoil:MouseInputBehavior IsEnabled="{Binding ElementName=self, Path=IsLandscapeInputEnabled, Mode=OneWay}" />
                        <zoil:KeyboardInputBehavior IsEnabled="{Binding ElementName=self, Path=IsLandscapeInputEnabled, Mode=OneWay}" />
                        <zoil:TouchInputBehavior IsEnabled="{Binding ElementName=self, Path=IsLandscapeInputEnabled, Mode=OneWay}" IsInertiaEnabled="False" />
                        <zoil:SynchronizeViewportBehavior SenderID="ZOILIX" Type="Sender" ViewportReceived="OnViewportReceived" />
                    </i:Interaction.Behaviors>
                    <zoil:ZLandscapeCanvas x:Name="LandscapeCanvas" Background="Transparent" ItemsSource="{Binding Path=MyRootCollection, ElementName=self}" zoil:ZInformationLandscape.ZoomTarget="True">
                        <i:Interaction.Behaviors>
                            <zoil:SelectionBehavior x:Name="MySelectionBehavior" IsEnabled="{Binding ElementName=self, Path=IsSelectionEnabled}" SelectionMode="BoundingBox" TargetType="{x:Type Photo:FlickrPhotoView}" SelectionFinished="OnSelectionFinished"/>
                            <zoil:ConnectionBehavior x:Name="MyConnectionBehavior" IsEnabled="{Binding ElementName=self, Path=IsConnectionEnabled}"
                                                     ConnectionFinished="OnConnectionFinished" ConnectionCancelled="OnConnectionCancelled" />
                        </i:Interaction.Behaviors>
                    </zoil:ZLandscapeCanvas>
                </zoil:ZInformationLandscape>
            </Grid>
            <!-- HUDGrid is where Title, Searchbar and Selectionbutton are placed -->
            <Border BorderBrush="Black" BorderThickness="0, 2, 0, 0" Height="70" VerticalAlignment="Bottom">
                <Grid x:Name="HUDGrid">
                    <Grid.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="White" Offset="1"/>
                            <GradientStop Color="#FFCCCCCC" Offset="0"/>
                        </LinearGradientBrush>
                    </Grid.Background>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <!-- Title "ZOILPhotoBrowser" -->
                    <TextBlock FontSize="30" FontWeight="Light" VerticalAlignment="Center" Margin="10, 0, 0, 0">
                        <Run Foreground="#B7FCFE" FontWeight="ExtraBold">/</Run><Run Foreground="#64BEC1" FontWeight="ExtraBold">/</Run><Run Foreground="#4E81BD" FontWeight="ExtraBold">/</Run><Run Foreground="Black">ZOIL</Run>
                        <Run Foreground="RoyalBlue">Photo</Run><Run Foreground="DeepPink">Browser</Run>
                    </TextBlock>
                    <!-- Searchbar -->
                    <Border Grid.Column="2" BorderBrush="Black" BorderThickness="2" CornerRadius="5" Margin="8">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="1" Color="#FF555555"/>
                                <GradientStop Offset="0" Color="#FF444444"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <StackPanel Orientation="Horizontal" Grid.Column="1">
                            <Label Content="Search" Foreground="DeepSkyBlue" VerticalAlignment="Center"/>
                            <s:SurfaceTextBox IsEnabled="{Binding ElementName=self, Path=IsSearchActive, Converter={zoil:BooleanNotConverter}}" Text="{Binding ElementName=self, Path=SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="150" KeyDown="OnSearchTextBoxKeyDown" Margin="8"/>
                        </StackPanel>
                    </Border>
                    <!-- DynamicQuery -->
                    <Border Grid.Column="3" BorderBrush="Black" BorderThickness="2" CornerRadius="5" Margin="8">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="1" Color="#FF555555"/>
                                <GradientStop Offset="0" Color="#FF444444"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <StackPanel Orientation="Horizontal" Grid.Column="1">
                            <Label Content="Dynamic Query" Foreground="YellowGreen" VerticalAlignment="Center"/>
                            <s:SurfaceTextBox Width="150" Text="{Binding ElementName=self, Path=DynamicQueryText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  Margin="8"/>
                        </StackPanel>
                    </Border>
                    <!-- ToolBox -->
                    <Border Grid.Column="1" BorderBrush="Black" BorderThickness="2" CornerRadius="5" Margin="8">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Offset="1" Color="#FF555555"/>
                                <GradientStop Offset="0" Color="#FF444444"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <StackPanel Orientation="Horizontal" Grid.Column="1">
                            <Label Content="ToolBox" Foreground="White" VerticalAlignment="Center"/>
                            <s:SurfaceToggleButton Style="{StaticResource CustomSurfaceToggleButtonStyle}" Margin="5" IsChecked="{Binding ElementName=self, Path=IsSelectionEnabled, Mode=TwoWay}">
                                <Image Source="Images/BoundingBoxSelectModeButton.png" Stretch="Fill" />
                            </s:SurfaceToggleButton>
                            <s:SurfaceButton Style="{StaticResource CustomSurfaceButtonStyle}" Margin="5" Click="OnClearLandscapeClick">
                                <Image Source="Images/ClearLandscape.png" Stretch="Fill" />
                            </s:SurfaceButton>
                            <s:SurfaceButton Content="Sort" Style="{StaticResource CustomSurfaceButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" Click="OnSortClick"/>
                        </StackPanel>
                    </Border>
                </Grid>
            </Border>
            <!-- Grid used for ProgressBar -->
            <Grid x:Name="OverlayGrid" Visibility="{Binding ElementName=self, Path=IsSearchActive, Converter={zoil:BooleanToVisibilityConverter}}">
                <local:ProgressBar CurrentTaskPercentage="{Binding ElementName=self, Path=SearchProgress}"></local:ProgressBar>
            </Grid>
            <TextBlock Foreground="White" Text="{Binding Path=ElementCount, ElementName=self, StringFormat={}Photos: {0}}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        </Grid>
    </Border>
</Window>
